import React, { useState, useEffect } from "react"
import { connect } from "react-redux"
import "./Home.css"
import { actionCreator } from "./store"
import Header from "../../component/Header/Header"
import Question from "../../component/Question/Question"
import Sidebar from "../../template/Sidebar/Sidebar"


function Home(props) {
    const [question, setQuestion] = useState(props.question)
    useEffect(() => {
        props.getQuestionList()
    }, [])
    useEffect(() => {
        setQuestion(props.question)
    }, [props.question])
    return (
        <div className="home_container">
            <div className="home_header">
                <Header searchQuestion={setQuestion} />
            </div>
            <div className="home_content">
                <div className="home_content_question">
                    <div className="home_content_question_head">
                        <ul>
                            <li>
                                <p>推荐</p>
                            </li>
                            <li>
                                <p>关注</p>
                            </li>
                        </ul>
                    </div>
                    <div className="home_content_question_list">
                        <ul>
                            {
                                question.map(item => {
                                    return (
                                        <li key={item._id}>
                                            <Question question={item} />
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
                <div className="home_content_other">
                    <Sidebar />
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        question: state.home.question
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getQuestionList() {
            let action = actionCreator.getQuestion()
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)